import { PlusOutlined } from '@ant-design/icons';
import type { ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Avatar, Button, Popconfirm, Space, Table, Tag, message } from 'antd';
import { useRef, useState } from 'react';
// import Marquee from 'react-fast-marquee';
import ClientDrawer from './components/ClientDrawer';

const Client: React.FC = () => {
  const actionRef = useRef<ActionType>();

  const [clientDrawerParams, setclientDrawerParams] = useState({
    open: false,
    info: {},
  });

  const columns: any = [
    {
      title: '关键字',
      dataIndex: 'key',
      hideInTable: true,
    },
    {
      title: '头像',
      dataIndex: 'headImg',
      hideInSearch: true,
      render: (_dom, _record) => {
        return <Avatar src={_record?.headImg} />;
      },
      width: 60,
    },
    {
      title: '用户名',
      dataIndex: 'username',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '昵称',
      dataIndex: 'nickName',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '登录状态',
      dataIndex: 'online',
      hideInSearch: true,
      width: 120,
      render: (text, record) => {
        const { count } = record || {};
        return onlineList?.includes(count) ? (
          <Tag color="blue">在线</Tag>
        ) : (
          <Tag color="red">离线</Tag>
        );
      },
    },
    {
      title: '账号手机',
      dataIndex: 'phone',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '账号类型',
      dataIndex: 'rule',
      hideInSearch: true,
      render: (text: any, record: any) => {
        return +record?.rule === 10
          ? '超级管理员'
          : +record?.rule === 1
          ? '普通会员'
          : '管理员';
      },
      width: 120,
    },
    {
      title: '注册时间',
      key: 'createTime',
      dataIndex: 'createTime',
      hideInSearch: true,
      width: 120,
    },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 230,
      render: (text: any, record: any) => [
        record.rule !== 10 && (
          <a
            key="editable"
            onClick={() => {
              setclientDrawerParams({
                open: true,
                info: record,
              });
            }}
          >
            编辑
          </a>
        ),
      ],
    },
  ];

  return (
    <>
      <ProTable
        bordered
        columns={columns}
        actionRef={actionRef}
        cardBordered
        scroll={{ x: 1200 }}
        request={async (params) => {
          return {
            data: [],
            success: true,
            total: 0,
          };
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        pagination={{
          defaultPageSize: 10,
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              setclientDrawerParams({
                open: true,
                info: {},
              });
            }}
            type="primary"
          >
            新增用户
          </Button>,
          
        ]}
        rowSelection={{
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}
        tableAlertRender={({ selectedRowKeys, onCleanSelected }) => {
          return (
            <Space size={24}>
              <span>
                已选 {selectedRowKeys.length} 项
                <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
                  取消选择
                </a>
              </span>
            </Space>
          );
        }}
        tableAlertOptionRender={({ selectedRowKeys }) => {
          return (
            <Space size={16}>
              <Popconfirm
                key="view"
                title="确定删除该用户"
                onConfirm={async () => {
                  try {
                    
                    message.success('删除成功');
                    actionRef.current?.reload();
                    actionRef?.current?.clearSelected?.();
                  } catch (error) {}
                }}
                okText="Yes"
                cancelText="No"
              >
                <Button danger type="link">
                  批量删除
                </Button>
              </Popconfirm>
              {/* <a>导出数据</a> */}
            </Space>
          );
        }}
      />

      {clientDrawerParams.open && (
        <ClientDrawer
          open={clientDrawerParams.open}
          info={clientDrawerParams.info}
          close={() => {
            setclientDrawerParams({
              open: false,
              info: '',
            });

            actionRef.current?.reload();
          }}
        ></ClientDrawer>
      )}
    </>
  );
};

export default Client;
